import React, { useState } from "react";
import { 
  Button, Card, Row, Col, Radio, Form, Input, Typography, Divider, Badge 
} from "antd";
import { 
  LeftOutlined, EnvironmentOutlined, UserOutlined, PhoneOutlined 
} from "@ant-design/icons";
import { Order, OrderStatus } from '../types/order';

//确认界面
const { Title, Text } = Typography;
const { TextArea } = Input;

interface Address {
  id: string;
  name: string;
  phone: string;
  province: string;
  city: string;
  district: string;
  detail: string;
  isDefault: boolean;
}

interface CheckoutPageProps {
  isMobile: boolean;
  order: {
    items: Array<{
      id: string;
      name: string;
      price: number;
      quantity: number;
      image: string;
    }>;
    totalAmount: number;
    status: OrderStatus;
  };
  onSubmit: (address: Address) => void;
  onBack: () => void;
}

export default function CheckoutPage({ 
  isMobile, 
  order,
  onSubmit,
  onBack
}: CheckoutPageProps) {
  const [form] = Form.useForm();
  const [selectedAddress, setSelectedAddress] = useState<string | null>(null);
  
  // 模拟地址数据
  const addresses: Address[] = [
    {
      id: "1",
      name: "张三",
      phone: "13800138000",
      province: "北京市",
      city: "北京市",
      district: "海淀区",
      detail: "中关村大街1号",
      isDefault: true
    },
    {
      id: "2",
      name: "张三",
      phone: "13900139000",
      province: "上海市",
      city: "上海市",
      district: "浦东新区",
      detail: "张江高科技园区88号",
      isDefault: false
    }
  ];
  
  // 处理提交订单
  const handleSubmit = () => {
    if (!selectedAddress) {
      return;
    }
    
    const address = addresses.find(addr => addr.id === selectedAddress);
    if (address) {
      onSubmit(address);
    }
  };
  
  return (
    <div style={{ 
      padding: isMobile ? "8px" : "16px", 
      minHeight: "100vh",
      paddingBottom: isMobile ? "120px" : "140px"
    }}>
      {/* 顶部导航 */}
      <div style={{ 
        display: "flex", 
        alignItems: "center", 
        marginBottom: 16,
        padding: "12px 0"
      }}>
        <Button 
          type="text" 
          icon={<LeftOutlined />} 
          onClick={onBack}
          style={{ marginRight: 8 }}
        />
        <Title level={4} style={{ margin: 0 }}>确认订单</Title>
      </div>
      
      {/* 收货地址 */}
      <Card 
        title="收货地址" 
        bordered={false}
        headStyle={{ padding: "0 16px", fontWeight: "normal" }}
        bodyStyle={{ padding: isMobile ? "12px" : "16px" }}
        style={{ marginBottom: 16 }}
      >
        <Radio.Group 
          value={selectedAddress} 
          onChange={e => setSelectedAddress(e.target.value)}
          style={{ width: "100%" }}
        >
          {addresses.map(address => (
            <Radio 
              key={address.id} 
              value={address.id} 
              style={{ 
                display: "flex", 
                alignItems: "flex-start",
                padding: "12px 0",
                width: "100%",
                borderBottom: "1px solid #f0f0f0"
              }}
            >
              <div style={{ flex: 1, marginLeft: 8 }}>
                <div style={{ display: "flex", alignItems: "center", marginBottom: 4 }}>
                  <span style={{ fontWeight: 500, marginRight: 8 }}>{address.name}</span>
                  <span>{address.phone}</span>
                  {address.isDefault && (
                    <Badge 
                      color="#1890ff" 
                      text="默认" 
                      style={{ marginLeft: 8, fontSize: 12 }} 
                    />
                  )}
                </div>
                <div style={{ color: "#666" }}>
                  {address.province}{address.city}{address.district}{address.detail}
                </div>
              </div>
            </Radio>
          ))}
        </Radio.Group>
        
        <Button 
          type="dashed" 
          block 
          icon={<EnvironmentOutlined />}
          style={{ marginTop: 12 }}
        >
          添加新地址
        </Button>
      </Card>
      
      {/* 订单商品 */}
      <Card 
        title="商品清单" 
        bordered={false}
        headStyle={{ padding: "0 16px", fontWeight: "normal" }}
        bodyStyle={{ padding: isMobile ? "12px" : "16px" }}
        style={{ marginBottom: 16 }}
      >
        {order.items.map((item: any) => (
          <div 
            key={item.id} 
            style={{ 
              display: "flex", 
              padding: "12px 0",
              borderBottom: "1px solid #f0f0f0"
            }}
          >
            <div style={{
              width: 80,
              height: 80,
              marginRight: 12,
              background: "#f5f5f5",
              borderRadius: 4,
              display: "flex",
              alignItems: "center",
              justifyContent: "center"
            }}>
              <img 
                src={`/images/${item.image}`} 
                alt={item.name}
                style={{ 
                  maxWidth: "80%", 
                  maxHeight: "80%",
                  objectFit: "contain" 
                }}
              />
            </div>
            
            <div style={{ flex: 1 }}>
              <div style={{ 
                fontSize: isMobile ? 14 : 16, 
                marginBottom: 6,
                fontWeight: 500,
                display: "-webkit-box",
                WebkitBoxOrient: "vertical",
                WebkitLineClamp: 2,
                overflow: "hidden"
              }}>
                {item.name}
              </div>
              
              <div style={{ 
                display: "flex", 
                justifyContent: "space-between", 
                alignItems: "center"
              }}>
                <div>
                  <span style={{ 
                    fontSize: isMobile ? 15 : 16, 
                    color: "#ff4d4f", 
                    fontWeight: "bold" 
                  }}>
                    ¥{item.price}
                  </span>
                </div>
                
                <div style={{ fontSize: isMobile ? 14 : 15 }}>
                  x {item.quantity}
                </div>
              </div>
            </div>
          </div>
        ))}
      </Card>
      
      {/* 买家留言 */}
      <Card 
        title="买家留言" 
        bordered={false}
        headStyle={{ padding: "0 16px", fontWeight: "normal" }}
        bodyStyle={{ padding: isMobile ? "12px" : "16px" }}
        style={{ marginBottom: 16 }}
      >
        <TextArea 
          placeholder="选填：对本次交易的说明（建议填写已和卖家达成一致的说明）" 
          rows={2}
          maxLength={100}
        />
      </Card>
      
      {/* 订单金额 */}
      <Card 
        bordered={false}
        bodyStyle={{ padding: isMobile ? "12px" : "16px" }}
      >
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
          <Text>商品金额</Text>
          <Text>¥{order.totalAmount !== undefined ? order.totalAmount.toFixed(2) : '0.00'}</Text>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
          <Text>运费</Text>
          <Text>¥0.00</Text>
        </div>
        <Divider style={{ margin: "12px 0" }} />
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <Text strong style={{ fontSize: isMobile ? 16 : 18 }}>实付款</Text>
          <Text strong style={{ fontSize: isMobile ? 18 : 20, color: "#ff4d4f" }}>
            ¥{order.totalAmount !== undefined ? order.totalAmount.toFixed(2) : '0.00'}
          </Text>
        </div>
      </Card>
      
      {/* 底部提交栏 */}
      <div style={{ 
        position: "fixed",
        bottom: isMobile ? 56 : 60,
        left: 0,
        right: 0,
        background: "#fff",
        padding: "12px 16px",
        borderTop: "1px solid #f0f0f0",
        boxShadow: "0 -2px 10px rgba(0, 0, 0, 0.05)",
        zIndex: 100,
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center"
      }}>
        <div>
          <div style={{ fontWeight: "bold", fontSize: isMobile ? 16 : 18 }}>
            合计: <span style={{ color: "#ff4d4f" }}>¥{order.totalAmount !== undefined ? order.totalAmount.toFixed(2) : '0.00'}</span>
          </div>
        </div>
        <Button 
          type="primary" 
          danger 
          style={{ 
            width: isMobile ? 120 : 150,
            height: isMobile ? 40 : 48,
            fontWeight: "bold",
            fontSize: isMobile ? 14 : 16
          }}
          onClick={handleSubmit}
          disabled={!selectedAddress}
        >
          提交订单
        </Button>
      </div>
    </div>
  );
}